(function() {
	
//	var i = 0,
//		res, res2,
//		a = 27,
//		b = 43,
//		w = Math.atan(b / a);
//	console.time("pythagoras");
//	for (; i < 10000000; i++) {
//		res = Math.sqrt(a * a + b * b);
//	}
//	console.timeEnd("pythagoras");
//	console.log(res);
//	
//	i = 0;
//	console.time("sin");
//	for (; i < 10000000; i++) {
//		res2 = b / Math.sin(w);
//	}
//	console.timeEnd("sin");
//	console.log(res2);
	
function Person(firstname, surname, age) {
  this.firstname = firstname;
  this.surname = surname;
  this.age = age;
  this.name = function() {
    return this.firstname + " " + this.surname;
  };
}
Person.prototype.toString = function() {
  return this.name() + " (" + this.age + " years old)";
};

var pavel = new Person("Pavel", "Novák", 21);
var petr = new Person("Petr", "Komolý", 25);
pavel.toString(); //vrátí Pavel Novák (25 let)
petr.toString(); //vrátí Petr Komolý (21 let)


function person(firstname, surname, age) {
  return {
    name: function() {
      return firstname + " " + surname;
    },
    toString: function() {
      return this.name() + " (" + age + " years old)";
    }
  };
}
var vasek = person("Vašek", "Dlouhý", 36);
	console.log(vasek.toString());



new sCanvas("canvas", function() {
	//this odkazuje na instanci objektu sCanvas
	this.rect(0, 0, 10, 20).click(function() {
		//this odkazuje na instanci obdélníku
		this.attr("width"); //vrátí 10
	});
});


/*
var rect = this.rect(0, 0, 10, 20);
rect.attr("fill", "blue");
rect.data("order", 1);
rect.click(function() {
  //kód vykonaný při kliknutí na obdélník
});

this.rect(0, 0, 10, 20)
  .attr("fill", "blue")
  .data("order", 1)
  .click(function() {
    //kód vykonaný při kliknutí na obdélník
  });

rect.setAttr("fill", "blue"); //CQS command
rect.getAttr("fill"); //CQS query

rect.attr("fill", "blue"); //non-CQS command
rect.attr("fill"); //non-CQS query
*/




	var c, c2;
	
	var img = document.getElementById("w3c");
	
	var canvas = document.getElementById("ccc");
	var cx = canvas.getContext("2d");

//	cx.beginPath();
//	cx.rotate(0.1);
//	cx.translate(80, 0);
//	cx.moveTo(200, 50);
//	cx.lineTo(250, 50);
//	cx.lineTo(250, 100);
//	cx.lineTo(200, 100);
//	cx.lineTo(200, 100);
//	cx.closePath();
//	cx.fill();
//	console.log(cx.isPointInPath(280, 90));
	
//	setTimeout(function() {
		c = new sCanvas("canvas", function() {
			console.log(this);
			
			for (var i = 0; i < 5; i++) {
				this.rect(250 + i * 30, 50, 20, 20).attr("group", "clickRect");
			}
			
			this.get("clickRect").each(function(i) {
				this.data("val", i);
			})
			.hover(function() {
				console.log("clickRect - " + this.data("val"));
			});
			
			this.rect(350, 250, 50, 50).attr("rotation", Math.PI / 4).animate({
				//rotation: "+=" + (Math.PI * 2)
				rotation: -Math.PI / 4
			}, {
				duration: 2000,
				repeat: 3,
				complete: function() {
					console.log("anim");
				}
			});
			
			this.rect(31, 3, 9, 9).attr({
				fill: "red",
				stroke: "black",
				lineWidth: 2
			});
			
			this.circ(50, 4, 4);
			
			this.text("test", 60, 12).click(function() {
				console.log("lopata");
			});
			
			var rrr = this.rect({
				x: 210,
				y: 30,
				originX: -10,
				originY: -10,
				width: 10,
				height: 10
			}).click(function() {
				line.animate({
					shadowBlur: 10,
				}, 2000);
			});
			
			var line = this.line({
				x: 110,
				y: 10,
				originX: -10,
				originY: -10,
				lineWidth: 1,
				id: "line",
//				rotation: 45,
				rotation: Math.PI / 4,
				shadowColor: "red",
				shadowBlur: 0,
				shadowX: 5,
				shadowY: 5
			})
			.addLine(120, 20)
			.addLine(100, 20)
			.addLine(120, 10)
			.addQuadratic(160, 10, 140, 50)
			.addCubic(200, 10, 160, 50, 200, 0);
			var line2 = this.line({
				x: 110,
				y: 10,
				id: "line2"
			})
			.addLine(110, 20)
//			.addLine(100, 20)
//			.addLine(120, 10)
//			.addQuadratic(160, 10, 140, 50)
//			.addCubic(200, 10, 160, 50, 200, 0);
			
			var line3 = this.line({
				x: 250,
				y: 200,
				fill: "green",
				stroke: null
			})
			.addCubic(280, 200, 260, 180, 270, 180)
			.addCubic(250, 200, 260, 190, 270, 190);
			
			var rrHolder = this.rect({
				x: 200,
				y: 100,
				width: 40,
				height: 40,
				fill: "#ffaaaa"
			});
			
			var rr = this.rect({
				x: 200,
				y: 100,
				originX: 30,
				originY: 0,
				width: 40,
				height: 40,
				fill: "brown",
				rotation: Math.PI / 4,
				id: "rr",
//				opacity: 0.1,
				shadowColor: "red",
				shadowBlur: 1,
				shadowX: 5,
				shadowY: 5
			});
			
			var box = rr.box();
//			console.log(box);
			this.rect({
				x: box.left + (box.right - box.left) / 2,
				y: box.top + (box.bottom - box.top) / 2,
				width: box.width,
				height: box.height,
				fill: "green",
				id: "boxx"
			}).over(rr);
			
			this.rect({
				x: 150,
				y: 70,
				width: 3,
				height: 3,
				fill: "orange"
			});
			
			var r1 = this.rect({
				x: 4,
				y: 4,
				width: 5,
				height: 4,
				fill: "orange",
				stroke: "black",
				lineWidth: 1,
				rotation: Math.PI / 2,
				id: "r1",
				group: "rects"
			});
			
			var r2 = this.rect({
				x: 40,
				y: 40,
				width: 40,
				height: 40,
				fill: "orange",
				id: "r2",
				group: "rects"
			});
			
			var c1 = this.circ({
				x: 40,
				y: 40,
				radius: 20,
				fill: "red",
				//stroke: "black",
				lineWidth: 1,
				id: "c1",
				rotation: Math.PI / 2
			});
			
			var rect = this.rect({
				x: 100.5,
				y: 100.5,
//				yOrigin: 25,
//				xOrigin: 25,
				//rotation: Math.PI / 2,
				width: 50,
				height: 50,
				stroke: "red",
				fill: null,
				id: "rect",
				group: "rects objs"
			});
			
//			rect.data("datatest", {
//				one: 1,
//				two: 2
//			});
//			rect.data("datatest", {
//				two: 3
//			});
//			rect.data("test", undefined);
//			var all = rect.data();
//			rect.removeData("datatest");
//			console.log(rect.hasData("test"));
//			console.log(rect.data(), all);
			
			var func1 = function() {
				console.log("111");
			};
			var func2 = function() {
				console.log("222");
			};
			var rect2 = this.rect({
				x: 200,
				y: 200,
				width: 75,
				height: 75,
				id: "rect2"
			}).click(function() {
				console.log(this.sc.get("rects"));
				this.sc.get("rects").remove(true);
			});
			
			var toggle = true;
			rect.click(func1, function(e) {
				console.log("1");
//				if (toggle) {
//					this.animate({
//						rotation: "+=" + (2 * Math.PI)
//					}, {
//						duration: 2000,
//						repeat: 2,
//						complete: function() {
//							
//						}
//					}).animate({
//						x: 200
//					}, 1000);
//				} else {
//					e.removeHandlers();
////					if (this.isPaused()) {
////						this.play();
////					} else {
////						this.pause();
////					}
//				}
//				toggle = !toggle;
				//toggle = toggle ? !toggle : toggle;
//				.animate({
//					y: 200
//				}, "fast")
//				.animate({
//					x: 100
//				}, "slow")
//				.animate({
//					y: 100
//				}, "fast");
			}).dblclick(function() {
				
//			}).hover(function() {
//				console.log("in");
//			}, function() {
//				console.log("out");
			}).click(func2);
			
//			rect.attr("xOrigin", "=95");
//			rect.attr("x", 105);
			
			
//			var rects = this.get("rects");
			
//			var circ = this.circ({
//				x: 150,
//				y: 150,
//				radius: 15,
//				fill: null,
//				stroke: "red"
//			});
			
//			circ.addGroup("objs");
			
//			var circs = this.group("circs");
//			circs.add(circ);
			
//			var objs = this.get("objs");
//			objs.animate({
//				x: 250
//			}, 1000);
			
			try {
			this.image(img, 150, 40);
			var im = this.image(img, {
				x: 41,
				y: 40,
				width: 173,
				id: "im",
				rotation: Math.PI / 4,
				opacity: 0.5,
				shadowColor: "green",
				shadowX: 5,
				shadowY: 5
			}).click(function() {
				console.log("ccc");
			});
			} catch (err) {}
			var rot = 1 * Math.PI / 4;
//			var rot = 45;
			var t = this.text(98, {
				x: 150,
				y: 150,
				originX: 10,
				originY: 10,
				id: "t",
				fontSize: 30,
				fontFamily: "Verdana",
				fontWeight: "bold",
				fill: "#00f",
				baseline: "bottom",
				align: "center",
				rotation: rot,
				opacity: 0.3,
				shadowColor: "red",
				shadowX: 10,
				shadowY: -4
			}).val("Čyaa").click(function() {
				console.log("click");
			});
			
			var metrics = t.metrics();
			var under = this.rect({
				originX: t.origin.x + (t.attr("align") === "left" ? (-metrics.width / 2) : (t.attr("align") === "right" ? (metrics.width / 2) : 0)),
				originY: t.origin.y + metrics[t.attr("baseline")] - metrics.height / 2,
				x: 150 + t.origin.x,
				y: 150 + t.origin.y,
				width: metrics.width,
				height: metrics.height,
				fill: "orange",
				id: "under",
				rotation: rot
			}).over(t);
			
			var box = t.box();
			var b = this.rect({
				x: box.left + (box.right - box.left) / 2,
				y: box.top + (box.bottom - box.top) / 2,
				width: box.width,
				height: box.height,
				fill: "gray",
				id: "box"
			});
			under.under(b);
			
			var xxx = this.rect({
				x: 330,
				y: 200,
				width: 50,
				height: 50,
				originX: -30,
				originY: 30,
//				rotation: -210,
				fill: null,
				stroke: "black"
			});
			console.log(xxx.attr("rotation"));
			var xxxbox = xxx.box();
			
			this.rect(xxxbox.left, xxxbox.top, xxxbox.width, xxxbox.height).attr("fill", "rgba(255, 0, 0, 0.3)");

			var teeth = 4;
			var color = "red";
			var x = 150;
			var y = 150;
    var i, toothY, angle,
        radius = teeth * 15 / 2;
    /*
    //outer circ
    this.circ({
      x: x,
      y: y,
      radius: radius,
      fill: color
    });
    
    //inner circ
    this.circ({
      x: x,
      y: y,
      radius: radius / 4,
      fill: "#fff"
    });
    */
    
    toothY = y - radius + 6;
    angle = Math.PI * 2 / teeth;
    
    this.circ(x, toothY, 2);
    
    for (i = 3; i < teeth; i++) {
      this.line(x, toothY)
        .addLine(x - 14, toothY)
        .addLine(x - 9, toothY - 22)
        .addLine(x - 4, toothY - 28)
        .addLine(x + 4, toothY - 28)
        .addLine(x + 9, toothY - 22)
        .addLine(x + 14, toothY)
        .addLine(x, toothY)
        .attr({
          fill: color,
          stroke: null,
          originX: 0,
          originY: 20,
		  rotation: Math.PI * 2 / teeth
        });
    }			
		
//			rect.attr("id", "rectangle");
//			
//			this.get("rectangle").attr({
//				x: 100,
//				y: 60,
//				id: null
//			});
			
			
//			rect.bind("click", function() {
//				console.log("user func triggered");
//			});
			
//			var rect2 = this.rect({
//				x: 190,
//				y: 190,
//				width: 15,
//				height: 15
//			});
//			
//			rect2.bind("mouseleave", function() {
//				console.log("leave");
//			}).bind("mouseenter", function() {
//				console.log("enter");
//			}).bind("click", function() {
//				console.log("click");
//			}).click(function() {console.log("second");}).click(function() {console.log("third");});
			
//			rect.animate({
//				x: 50,
//				y: 50,
//				width: 210,
//				height: 210
//			}, 1000);
			t.createPointInPath(this.frontCx);
		}, function(e) {
			alert("error");
			console.log(e.error);
		});
		
//		c2 = new sCanvas("canvas2", function() {
//			var rect = this.rect({
//				x: 150,
//				y: 150,
//				width: 10,
//				height: 10
//			});
//			
//			rect.click(function() {
//				console.log("user func triggered");
//			});
//			
//			var rect2 = this.rect({
//				x: 190,
//				y: 190,
//				width: 15,
//				height: 15
//			});
//			
//			rect2.click(function() {
//				console.log("rect2");
//			});
//		}, function(e, err) {
//			alert("error");
//			console.log(err);
//		});
	
//	}, 1000);
	
//	setTimeout(function() {
//		c.ready(function() {
//			
//		});
//	}, 2000);
	
//	setTimeout(function() {
//		console.log(c);
//	}, 2000);
//	setTimeout(function() {
//		console.log(c2);
//	}, 2000);
	
}());